<p>  前面我们总结了下js遍历数组的方法,在这里，我们来总结下，js遍历对象都有些什么方法。<br>我们还是先声明一个对象，用于测试，如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-keyword">let</span> testSymbolKey=<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">'testSymbolKey'</span>),
    testPrototypeSymbolKey=<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">'testPrototypeSymbolKey'</span>);
<span class="hljs-keyword">function</span> <span class="hljs-title function_">TestObj</span>(<span class="hljs-params"></span>){
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">username</span>=<span class="hljs-string">'testname'</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span>=<span class="hljs-number">28</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">sort</span>=<span class="hljs-number">100</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">address</span>=<span class="hljs-string">'test address'</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">testFunction</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'test function'</span>);
    }
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">tmpObj</span>={
        <span class="hljs-attr">attr1</span>:<span class="hljs-number">1</span>
    }
    <span class="hljs-variable language_">this</span>[testSymbolKey]=<span class="hljs-string">'owntestSymbolKey'</span>;
}
<span class="hljs-title class_">TestObj</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">enumAttr1</span>=<span class="hljs-number">1000</span>;
<span class="hljs-title class_">TestObj</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>[testPrototypeSymbolKey]=<span class="hljs-string">'testPrototypeSymbolKey'</span>;
<span class="hljs-title class_">TestObj</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>.<span class="hljs-property">enumFunction</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'enum function'</span>);
}
<span class="hljs-keyword">let</span> testObj=<span class="hljs-keyword">new</span> <span class="hljs-title class_">TestObj</span>();
<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperty</span>(testObj, <span class="hljs-string">"sex"</span>, {
    <span class="hljs-attr">value</span>: <span class="hljs-string">"man"</span>,
    <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">false</span>
});</span>
</code><span class="copy-button">复制代码</span></pre>
<p>一、<strong>for...in</strong>:循环遍历对象自身的和原型链上的可枚举属性(不含Symbol属性)，如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> _key <span class="hljs-keyword">in</span> testObj){
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(_key+<span class="hljs-string">':'</span>+testObj[_key]);
}
<span class="hljs-comment">/*
username:testname
age:28
sort:100
address:test address
testFunction:function(){
        console.log('test function');
    }
tmpObj:[object Object]
enumAttr1:1000
enumFunction:function(){
    console.log('enum function');
}
*/</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>二、<strong>Object.keys()</strong>:返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。兼容ie9及以上浏览器。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(testObj);
<span class="hljs-comment">//Array(6) [ "username", "age", "sort", "address", "testFunction", "tmpObj" ]</span>
<span class="hljs-comment">//我们看到这里testObj对象原型对象上的属性和方法没有被返回到数组中去</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>三、<strong>Object.values()</strong>:返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的值。兼Edge14及以上浏览器。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">values</span>(testObj);
<span class="hljs-comment">//Array(6) [ "testname", 28, 100, "test address", testFunction(), {…} ]</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>四、<strong>Object.getOwnPropertyNames()</strong>:返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(testObj);
<span class="hljs-comment">//Array(7) [ "username", "age", "sort", "address", "testFunction", "tmpObj", "sex" ]</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>五、<strong>Object.getOwnPropertySymbols()</strong>:返回一个数组，包含对象自身的所有 Symbol 属性的键名。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertySymbols</span>(testObj);
<span class="hljs-comment">//Array [ Symbol(testSymbolKey) ]</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>六、<strong>Reflect.ownKeys()</strong>:返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Reflect</span>.<span class="hljs-title function_">ownKeys</span>(testObj);
<span class="hljs-comment">//Array(8) [ "username", "age", "sort", "address", "testFunction", "tmpObj", "sex", Symbol(testSymbolKey) ]</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>七、<strong>Object.entries()</strong>:返回一个数组(不含Symbol属性)，包括对象自身可枚举属性的键值对数组。兼Edge14及以上浏览器。如下：</p>
<pre><code class="language-JavaScript"><span class="code-block"><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(testObj);
<span class="hljs-comment">//Array(6) [["username","testname"],[ "age", 28 ],[ "sort", 100 ],[ "address", "test address" ],[ "testFunction", testFunction() ],[ "tmpObj", {…} ]]</span></span>
</code><span class="copy-button">复制代码</span></pre>
<p>  我们看到，有不少方法是将对象属性或值转换为数组返回，而后我们可以按照数组的方式来遍历对象了</p>
